<!--  -->
<template>
  <div>
    <c-title :hide="false" text="答题数据"></c-title>
    <div class="answer" v-if="answerData.length > 0">
      <block v-for="(item,index) in answerData" :key="index">
        <div class="answer-item flex">
          <div class="info flex">
              <van-image
              width="40px"
              height="40px"
              round
              :src="item.member && item.member.avatar_image"
            />
          </div>
          <div class="info-wrap flex">
            <div class="info-name flex-j-sb ">
              <h3>{{item.member && item.member.nickname}}</h3>
              <p>奖励金额：<span>￥{{item.price}}</span></p>
            </div>
            <div class="info-time flex-a-c flex-j-sb">
              <p>{{item.created_at}}</p>
              <p v-if="item.status">发放成功</p>
              <p v-else>发放失败</p>
            </div>
          </div>
        </div>
      </block>
      
    </div>
    <van-empty description="暂无数据" v-else/>
  </div>
</template>

<script>
import answerData_controller from "./answerData_controller.js";
export default answerData_controller;
</script>
<style lang="scss" scoped>
/* @import url(); 引入公共css类 */
.answer {
  margin: 10px 12px 0 12px;

  .answer-item {
    border-radius: 10px 10px 10px 10px;
    background-color: #fff;
    padding: 10px;
    margin: 0 0 10px 0;

    .info {
      padding: 0 6px 0 0;
    }

    .info-wrap {
      flex: 1;
      flex-direction: column;

      .info-name {
        text-align: left;
        align-items: flex-end;
        padding-bottom: 1px;

        h3 {
          font-weight: bold;
          color: #00001c;
          font-size: 14px;
        }

        p {
          font-weight: 400;
          color: #6e6e79;
          font-size: 12px;

          span {
            color: #f15353;
          }
        }
      }

      .info-time {
        color: #6e6e79;
        font-size: 12px;
      }
    }
  }
}
</style>